<template>
  <!-- 图片消息 -->
  <div class="chat-bubble" :class="{'self': chat.isSelf}">
    <!-- 头像 -->
    <div class="head-url" v-hammer:tap="(ev)=>onHeadClicked(ev)" v-hammer:press="(ev)=>onHeadPressed(ev)">
      <img
        :src="chat.fromAccountHeadurl ? chat.fromAccountHeadurl : require('@/assets/icons/head.svg')"
        alt
      />
    </div>

    <!-- 聊天内容 -->
    <div class="content">
      <div class="user-info" v-if="!chat.isSelf">
        <div class="user-level" :class="`user-level-${chat.role}`">{{ chat.role | Role}}</div>
        <div class="username ellipsis">{{ chat.fromAccountNick }}</div>
      </div>

      <div
        class="bubble packet-wrapper flexbox column"
        v-hammer:tap="(ev)=>onPacketClicked(ev)"
        :class="{'got': status !== 0}"
      >
        <div class="info flexbox">
          <div class="icon">
            <img style="margin-top: 3px" src="@/assets/images/redpacket_icon.png" alt />
          </div>
          <div class="msg flexbox column">
            <div class="msg-content ellipsis">{{ packet.remark }}</div>
            <div class="status">{{ statusMap[status] }}</div>
          </div>
        </div>
        <div class="bottom">
          <span>蓝卡</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
declare const $Vue: Vue;

@Component<Redpacket>({
  mixins: [MessageMixin],
})
export default class Redpacket extends Vue {

  @Prop({
    default: () => ({
      message: '积分多多，欢乐多多'
    })
  })
  chat: any;

  private eventList: any = ['$getPacketStatus','$noMorePacket']

  private packet: any = {};

  private status: any = 0;

  private statusMap = {
    '0': '未领取',
    '1': '已领取',
    '2': '已抢完',
  }


  protected mounted() {
    $Vue.$on('$getPacketStatus', this.$getPacketStatus);
    this.packet = Object.assign({}, this.chat.content);

    if (this.packet.sendId) {
      this.sendMessage(MsgTypeKV.getPacketStatus, {
        sendId: this.packet.sendId,
      });
    }

  }

  private onHeadClicked() {
    $Vue.$emit('onHeadClicked', {
      data: this.chat,
    });
  }


  private onHeadPressed() {
    $Vue.$emit('onHeadPressed', {
      data: this.chat,
    });
  }

  private onPacketClicked() {
    this.sendMessage(MsgTypeKV.getPacketStatus, {
      sendId: this.packet.sendId,
    });
    let msg = 'onOpenRedpacket'
    if (this.status === 1 || this.status === 2) {
      msg = 'onShowRedpacketDetail'
    }
    $Vue.$emit(msg, {
      data: this.packet,
      status: this.status,
    });
  }

  /**
   * 获取到发送成功的消息后 作为消息发送出去
   */
  private $getPacketStatus(data: any) {
    if (data.result === 0) {
      if (this.packet.sendId === data.sendId) {
        this.status = data.status;
        this.packet.headUrl = data.headUrl;
        this.packet.nickname = data.nickname;
        this.packet.status = data.status;
        this.packet.number = data.number;
      }
    } else {

    }
  }

  private $noMorePacket(data: any) {
    if (data.result === 0) {
      if (this.packet.sendId === data.sendId) {
        this.status = data.status;
        this.packet.status = data.status;
      }
    } else {

    }
  }

}
</script>

<style lang="stylus" scoped>
.bubble-photo
  max-height 100% 
  max-width 100%

.packet-wrapper 
  text-align center!important
  height 80px!important
  max-height 80px!important
  width 200px!important
  padding 0!important
  border-radius 10px!important
  &.got
    filter opacity(0.45)
  .info
    width 100% 
    height 76% 
    padding 4px
    background #03A9F4
    border-top-left-radius 10px
    border-top-right-radius 10px
    box-sizing border-box
    overflow hidden
    .icon
      flex-basis 25% 
      width 25% 
      img 
        width 78% 
        max-height 78% 
    .msg
      flex-basis 75% 
      width 75% 
      text-align left 
      .msg-content
        font-size 13px 
        color white
        margin-top 5px
      .status 
        font-size 11px
        color white
  .bottom 
    box-sizing border-box
    border-bottom-left-radius 10px
    border-bottom-right-radius 10px
    width 100% 
    height 24% 
    padding 1px 8px
    text-align left 
    font-size 11px 
    color #909090
    span 
      position relative
      bottom 3px

.bubble
  width 200px
  height 88px
  &:before
    border-color transparent #03A9F4 transparent transparent!important
.chat-bubble.self .bubble
  background white!important

.chat-bubble.self .bubble:after
  border-color transparent transparent transparent #03A9F4!important
</style>

